<template>
    <div class="login-container">
        <div class="login-box">
         <div class="login-logo">
             <img src="../assets/logo.png" alt="">
         </div>

  <el-form ref="userForm" :model='user' class="login-user" status-icon :rules="rulesFromLogin">
    <el-form-item prop="username">
    <el-input v-model="user.username" autocomplete="off" prefix-icon="el-icon-user-solid" placeholder='用户名'></el-input>
  </el-form-item>
    <el-form-item prop="password">
    <el-input type='password' v-model="user.password" prefix-icon="el-icon-key" placeholder='密码'></el-input>
  </el-form-item>
   <el-form-item >
    <el-button type="primary" @click="onSubmit">登陆</el-button>
    <el-button  type="info" @click='onReset'>重置</el-button>
  </el-form-item>
</el-form>
        </div>
    </div>
</template>
<script>

export default {
 data() {
        var username1 = (rule, value, callback) => {
        if (this.user.username === '') {
          callback(new Error('请输入用户名'))
        }
        else {
        if(this.user.username.length<3 || this.user.username.length>7){
          callback(new Error('请输入正确长度'))
        }else{
          callback();
        }
        }
      }
     return {
         user:{
             username:'admin',
             password:'123456'
         },
        rulesFromLogin: {
           username: [
            { validator: username1, trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],

        }
     }
 },
 methods: {
     onSubmit(){
        this.$refs.userForm.validate( async valid => {
          if (valid) {
           let result = await this.$http.post('login',this.user)
           if(result.data.meta.status===200){
               this.$message.success(result.data.meta.msg)
               console.log(result)
               sessionStorage.setItem('token',result.data.data.token)
               this.$router.push('./home')
           }else{
               this.$message.error(result.data.meta.msg)
           }
          } else {
            return false;
          }
        });
     },
     onReset(){
       this.$refs.userForm.resetFields()
     }
 },
}
</script>
<style lang="less">
    .login-container{
    height:100%;
    background:#2b4b6b;
        .login-box{
        width: 450px;
        height: 350px;
        background: #CCC;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
          .login-logo{
              padding: 10px;
              width: 150px;
              height: 150px;
              border-radius: 50%;
              box-shadow: 0 0 10px #eee;
              position: absolute;
              left: 50%;
              transform: translate(-50%,-50%);
              img{
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
              }
          }
          .login-user{
              margin-top: 130px;
              padding: 0 10px;
              text-align: center;
          }
        }
    }

</style>
